<template>
  <Tree :data="tree" :load-data="loadChildren" show-checkbox @on-select-change="handleSelectChange" @on-check-change="handleCheckChange"></Tree>
</template>

<script>
export default {
  data () {
    return {
      tree: []
    }
  },
  props: {
    module: {
      type: String,
      required: true
    },
    selectList: {},
    handleCheckChange: {}
  },
  computed: {
    allList () {
      return this.$store.state[this.module].allList
    }
  },
  created () {
    console.log('DataTree created')
    this.$store.dispatch(`${this.module}/getAllList`)
  },
  watch: {
    allList () {
      this.tree = []
      this.setTree(this.tree, this.allList)
    },
    selectList (list) {
      if (!list || list.length === 0) {
        this.clearChecked(this.tree)
        return
      }
      for (let i in list) {
        this.checkSelectList(this.tree, list[i])
      }
    }
  },
  methods: {
    setTree (tree, allList) {
      for (let i = 0; i < allList.length; i++) {
        const node = {
          value: allList[i]._links.self.href,
          title: allList[i].name,
          expand: false
        }
        for (let j in this.selectList) {
          if (this.selectList[j] === allList[i]._links.self.href) {
            node.checked = true
            // node.selected = true
            break
          }
        }
        if (allList[i].childrenCount > 0) {
          node.loading = false
          node.children = []
          // this.setTree(node.children, allList.children)
        }
        tree.push(node)
      }
    },
    loadChildren (item, callback) {
      this.$store.dispatch(`${this.module}/loadChildrenByParentId`, {
        item,
        cb: result => {
          const list = []
          for (let i = 0; i < result._embedded[this.module + 's'].length; i++) {
            const node = {
              value: result._embedded[this.module + 's'][i]._links.self.href,
              title: result._embedded[this.module + 's'][i].name
            }
            for (let j in this.selectList) {
              if (this.selectList[j].id === result._embedded[this.module + 's'][i].id) {
                node.checked = true
                node.selected = true
                break
              }
            }
            if (result._embedded[this.module + 's'][i].childrenCount > 0) {
              node.loading = false
              node.children = []
            }
            list.push(node)
          }
          callback(list)
        }
      })
    },
    handleSelectChange (list) {
      console.log(list)
    },
    checkSelectList (tree, selectItem) {
      for (let i in tree) {
        if (tree[i].value === selectItem) {
          // tree[i].checked = true
          this.$set(tree[i], 'checked', true)
        }
        if (tree[i].children && tree[i].children.length > 0) {
          this.checkSelectList(tree[i].children, selectItem)
        }
      }
    },
    clearChecked (tree) {
      for (let i in tree) {
        this.$set(tree[i], 'checked', false)
        if (tree[i].children && tree[i].children.length > 0) {
          this.clearChecked(tree[i].children)
        }
      }
    }
  }
}
</script>

<style>
</style>
